<template>
  <div ref="map" id="map"></div>
</template>

<script setup lang="ts">
import mapboxgl from 'mapbox-gl'
import mapjson from './assets/map.json'
const url = new URL('./assets/map_ing.json', import.meta.url).href
const map = ref(null) as any
const off = ref(true)
onMounted(() => {
  mapboxgl.accessToken =
    'pk.eyJ1IjoieGlueGlhbmciLCJhIjoiY2w0ZTNnMGs3MDBkdzNscDBjb3pjaWQ5YiJ9.d2Zjk81sQFYpiQ_BxiCHYA'
  const map = new mapboxgl.Map({
    container: 'map', // container ID
    center: [120.153576, 30.287459], // starting position [lng, lat]
    zoom: 6, // starting zoom
    minZoom: 6,
    maxZoom: 17,
    style: url, // style URL or style object
    hash: true, // sync `center`, `zoom`, `pitch`, and `bearing` with URL
    // pitch: 10, // 倾斜高度
    // bearing: -0, // 轴距高度
  })

  for (const marker of mapjson.features) {
    // Create a DOM element for each marker.
    const el = document.createElement('div')
    const width = 20
    const height = 20
    el.className = 'marker'
    el.style.backgroundImage = `url(https://placekitten.com/g/${width}/${height}/)`
    el.style.width = `${width}px`
    el.style.height = `${height}px`
    el.style.backgroundSize = '100%'

    const Marker = new mapboxgl.Marker(el)
      .setLngLat(marker.geometry.coordinates[0][0][20])

      .addTo(map)
      .setPopup(
        new mapboxgl.Popup({ offset: 20, className: 'my-class' }).setHTML(
          `<h1>${marker.properties.name}</h1>`,
        ),
      )
    el.addEventListener('click', (e: any) => {
      console.log(e, 'pros')
      off.value = true
      Marker.getPopup()
    })

    // Add markers to the map.
  }

  map.on('load', () => {
    map.addSource('maine', {
      type: 'geojson',
      data: mapjson,
    })
    // map.addSource('lable', {
    //   type: 'geojson',
    //   data: mapjson,
    // })

    // 标题
    map.addLayer({
      id: 'geojson-label',
      type: 'symbol',
      source: 'maine',
      layout: {
        'text-field': ['get', 'name'],
        'text-size': 14,
        'text-variable-anchor': ['top'],
        'text-justify': 'center',
        'symbol-z-order': 'source',
        'symbol-sort-key': ['get', 'index'],
        // filter: ['in', 'name', '杭州市'],
      },
      paint: {
        'text-color': 'rgb(159, 96, 55)',
        'text-halo-color': '#fff',
        'text-halo-width': 1.8,
      },
    })

    map.addLayer({
      id: 'maine-c',
      type: 'fill-extrusion',
      source: 'maine', // reference the data source
      layout: { visibility: 'visible' },
      paint: {
        // 'fill-color': '#0080ff',
        // 'fill-opacity': 0.5,
        'fill-extrusion-vertical-gradient': true,
        'fill-extrusion-color': '#0080ff',
        'fill-extrusion-height': 15000,
        'fill-extrusion-base': 14900,
        'fill-extrusion-opacity': 0.85,
        'fill-extrusion-pattern': 'ground',
        // 'fill-extrusion-color': [
        //   'match',
        //   ['number', ['get', 'adcode']],
        //   '#AAAAAA',
        // ],
      },
    })

    // 区域高亮
    map.addLayer({
      id: 'state-fills',
      type: 'fill',
      source: 'maine',
      layout: {},
      // filter: false,
      paint: {
        'fill-color': 'rgba(135, 250, 254, 0.7)',
        'fill-opacity': [
          'case',
          ['boolean', ['feature-state', 'hover'], false],
          1,
          0.5,
        ],
      },
      // 'circle-color': [
      //   'match',
      //   ['get', 'adcode'],
      //   330100,
      //   '#FFD273',
      //   2,
      //   '#E86D68',
      //   '#A880FF',
      // ],
    })
    //
    map.addLayer({
      id: 'pointlayerhighlight',
      type: 'fill',
      source: 'maine',
      paint: {
        'fill-color': 'rgba(98, 250, 224, 0.7)',
        'fill-opacity': [
          'case',
          ['boolean', ['feature-state', 'hover'], false],
          1,
          0.5,
        ],
      },
      filter: ['==', 'name', ''],
    })

    map.addLayer({
      id: 'outline',
      type: 'line',
      source: 'maine',
      layout: {},
      paint: {
        'line-color': 'pink',
        'line-width': 3,
      },
    })
  })

  map.on('click', e => {
    // console.log(e)
  })
  map.on('click', 'state-fills', function (e) {
    if (off.value) return (off.value = false)

    const center = [e.lngLat.lng, e.lngLat.lat]
    var feature = e.features[0]

    // 设置
    map.setFilter('pointlayerhighlight', [
      '==',
      'name',
      feature.properties.name,
    ])

    map.flyTo({ center, zoom: 8 })
  })

  // map.mapbox.on('mouseleave', 'sewage-layer', e => {
  //   map.mapbox.setFilter('Aregion-layer', false)
  // })
})
</script>

<style>
#map {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.marker {
  position: absolute;
  top: 20px;
  left: 0px;
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.my-class {
  position: absolute;
  top: 0;
  display: block;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  padding: 0;
}
.mapboxgl-popup-close-button {
  display: none;
}
</style>
